import React from 'react';
import { Card, Space, List, Avatar, Tag } from 'antd';

const News = () => {
  const data = [
    {
      title: '3000点保卫战再度打响！',
      description: '指数走弱，沪指下挫跌逾1%，深成指跌0.84%，创业板指跌0.86%。有色金属、航运、房地产等方向跌幅居前，沪深京三市下跌个股近4600只。',
      datetime: '2024-06-11',
      link: 'https://xueqiu.com/hashtag/IzMwMDDngrnkv53ljavmiJjlho3luqbmiZPlk43vvIEj',
      avatar:'/logo1.png'
      // 其他信息，如新闻来源、作者等
    },
    {
      title: '集运指数暴跌！港口航运股全线回调',
      description: '集运指数主力合约日内一度跌超9%！凤凰航运跌停，中远海控、宁波远洋、招商轮船、中远海特、招商南油、宁波海运等跟跌。',
      datetime: '2024-06-11',
      link: 'https://xueqiu.com/hashtag/I-mbhui_kOaMh-aVsOaatOi3jO-8gea4r-WPo-iIqui_kOiCoeWFqOe6v-WbnuiwgyM=',
      avatar:'/logo1.png'
      // 其他信息，如新闻来源、作者等
    },
    {
      title: '什么情况？金价一克便宜70元！',
      description: '多家黄金首饰门店反应，当前黄金饰品优惠幅度是普遍50元/克起步，优惠最大的品牌金价一克降了70元。',
      datetime: '2024-06-11',
      link: 'https://xueqiu.com/hashtag/I-S7gOS5iOaDheWGte-8n-mHkeS7t-S4gOWFi-S-v-WunDcw5YWD77yBIw==',
      avatar:'/logo1.png'
      // 其他信息，如新闻来源、作者等
    },
    {
      title: '低空经济概念再度回归，多股飙涨停',
      description: '低空经济概念早盘探底回升，上工申贝涨停，南京聚隆、万丰奥威、商络电子、金盾股份、建新股份等冲高',
      datetime: '2024-06-11',
      link: 'https://xueqiu.com/hashtag/I-S9juepuue7j-a1juamguW_teWGjeW6puWbnuW9ku-8jOWkmuiCoemjmea2qOWBnCM=',
      avatar:'/logo1.png'
      // 其他信息，如新闻来源、作者等
    },
    {
      title: '发生了什么？宁德时代突发跳水',
      description: '宁德时代走低，盘中跌超5%，成交额超28亿元',
      datetime: '2024-06-11',
      link: 'https://xueqiu.com/hashtag/I-WPkeeUn-S6huS7gOS5iO-8n-WugeW-t-aXtuS7o-eqgeWPkei3s-awtCM=',
      avatar:'/logo1.png'
      // 其他信息，如新闻来源、作者等
    },
  ];

  return (
    <Space direction="vertical" size={16}>
      <Card
        title="股票市场新闻速递"
        style={{
          width: 857,
          height: 380,
          overflowY: 'auto' // 添加滚动条
        }}
      >
        <List
          itemLayout="horizontal"
          dataSource={data}
          pagination={{
            pageSize: 7,
          }}
          renderItem={(item, index) => (
            <List.Item
              key={item.title}
              actions={[<Tag color="blue">{item.datetime}</Tag>]}
            >
              <List.Item.Meta
                avatar={<Avatar src={item.avatar} />}
                title={<a href={item.link}>{item.title}</a>}
                description={item.description}
              />
              {/* 可以添加更多新闻内容，如正文、图片等 */}
            </List.Item>
          )}
        />
      </Card>
    </Space>
  );
}

export default News;










// import React from 'react';
// import { Card, Space,List,Avatar,Tag } from 'antd';
// const News= () => {
//   const data = [
//     {
//       title: '新闻标题1',
//       description: '这是新闻简介1，新闻发生在某个地方...',
//       datetime: '2024-06-01',
//       link: 'https://www.baidu.com',
//       avatar:'/logo1.png'
//       // 其他信息，如新闻来源、作者等
//     },
//     {
//       title: '新闻标题2',
//       description: '这是新闻简介2，新闻发生在某个地方...',
//       datetime: '2024-06-01',
//       link: 'https://www.bing.com',
//       avatar:'/logo1.png'
//       // 其他信息，如新闻来源、作者等
//     },{
//       title: '新闻标题3',
//       description: '这是新闻简介3，新闻发生在某个地方...',
//       datetime: '2024-06-01',
//       avatar:'/logo1.png'
//       // 其他信息，如新闻来源、作者等
//     },{
//       title: '新闻标题4',
//       description: '这是新闻简介4，新闻发生在某个地方...',
//       datetime: '2024-06-01',
//       avatar:'/logo1.png'
//       // 其他信息，如新闻来源、作者等
//     },{
//       title: '新闻标题5',
//       description: '这是新闻简介5，新闻发生在某个地方...',
//       datetime: '2024-06-01',
//       avatar:'/logo1.png'
//       // 其他信息，如新闻来源、作者等
//     },
//     {
//       title: '新闻标题4',
//       description: '这是新闻简介4，新闻发生在某个地方...',
//       datetime: '2024-06-01',
//       avatar:'/logo1.png'
//       // 其他信息，如新闻来源、作者等
//     },{
//       title: '新闻标题5',
//       description: '这是新闻简介5，新闻发生在某个地方...',
//       datetime: '2024-06-01',
//       avatar:'/logo1.png'
//       // 其他信息，如新闻来源、作者等
//     },
//     {
//       title: '新闻标题5',
//       description: '这是新闻简介5，新闻发生在某个地方...',
//       datetime: '2024-06-01',
//       avatar:'/logo1.png'
//       // 其他信息，如新闻来源、作者等
//     },
//   ];


// return (
//   <Space direction="vertical" size={16}>
//     <Card
//       title="股票市场新闻速递"
//       style={{
//         width: 1200,
//         height:680,
//       }}
//     >
//       <List
//     itemLayout="horizontal"
//     dataSource={data}
//     pagination={{
//       pageSize: 7,
//     }}
//     renderItem={(item, index) => (
//       <List.Item
//       key={item.title}
//       actions={[<Tag color="blue">{item.datetime}</Tag>]}
//     >
//       <List.Item.Meta
//          avatar={<Avatar src={item.avatar} />} 
//         title={<a href={item.link}>{item.title}</a>}
//         description={item.description}
//       />
//       {/* 可以添加更多新闻内容，如正文、图片等 */}
//     </List.Item>
      
//     )}
//   />
//     </Card>
    
//   </Space>
// );
// }
// export default News;